
<template>
    <div class="pop-main">
        <div class="main-con">
            <table cellspacing="0" cellpadding="0">
                <colgroup>
                    <col width="110px">
                    <col>
                </colgroup>
                <tbody>
                <tr 
                    v-for="(item,index) in columns" 
                    :key="index">
                    <td><div class="td-con">{{item.title}}</div></td>
                    <td>
                        <div class="td-con" v-if="item.matter=='pic'"><img v-if="serial[item.code]" :src="serial[item.code]" @click="handleShowImg(serial[item.code])"></div>
                        <div class="td-con" v-else>{{serial[item.code]}}</div>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="handle-box">
                <el-button @click="handelClose">关闭</el-button>
            </div>
            <div class="imp-pop" v-show="isShowImg" @click="handleCloseImg"><img :src="imgSrc"></div>
        </div>
    </div>
</template>
<script>
import {clothCustomBarUrl} from '../../../common/ajax'
    export default{
        props:{
            serial:{}
        },
        data(){
            return{
                columns:[],
                imgSrc:'',
                isShowImg:false
            }
        },
        methods:{
            handelClose(){
                this.handleCloseImg()
                this.$emit('close')
            },
            handleLoadCol(){
                let self = this;
                self.columns = [];
                jQuery.ajax({
                    url: clothCustomBarUrl,
                    type:'get',
                    dataType: 'json',
                    timeout:5000,
                    cache: false,
                    data:{opt:4},
                    success: function(data) {
                        if(data.success){
                            for(var val of data.data){
                                if(val.soa == 0){
                                    self.columns.push(val)
                                }
                            }
                        }else {
                            self.$Message({type:'warning',message:data.msg});
                        }
                    },
                    error:function(XMLHttpRequest, textStatus, errorThrown){
                        self.$Message({type:'warning',message:'status：'+XMLHttpRequest.status+' readyState：'+XMLHttpRequest.readyState+' 错误信息:'+textStatus});
                    }
                })
            },
            handleShowImg(src){
                if(src){
                    this.imgSrc = src;
                    this.isShowImg = true
                }
            },
            handleCloseImg(){
                let self = this;
                if(self.imgSrc || self.isShowImg){
                    self.imgSrc = '';
                    self.isShowImg = false
                }
            }
        },
        created(){
            this.handleLoadCol()
        }
    }
</script>
<style scoped>
    .pop-main {
        overflow-y: auto;
    }
    .main-con {
        position: relative;
        width: 600px;
        padding: 10px;
        background-color: #fff;
        margin: 0 auto;
        border-radius: 6px;
    }
    table {
        width: 100%;
    }
    td {
        font-size: 14px;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    td:first-child {
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    td .td-con {
        padding: 5px;
    }
    td img {
        max-width: 100px;
        max-height: 50px;
    }
    .handle-box {
        padding: 10px;
        text-align: center;
    }
</style>